﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>fade effects</title>
    <style>
        div {
            margin: 2px;
            font: bold 9pt 'Segoe UI';
        }

        .parent {
            border: solid 2px black;
            color: black;
        }

        .child {
            border: solid 2px gray;
            height: 40px;
            color: gray;
        }
    </style>
</head>
<body>
    <div class="parent" data-name="parent">
        PARENT
        <div class="child" data-name="child 1">CHILD 1</div>
        <div class="child" data-name="child 2">CHILD 2</div>
        <div class="child" data-name="child 3">CHILD 3</div>
    </div>
    <button id="showAll">Show All</button>

</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    //even the value is zero, it's doesn't pull out from the DOM //doesn't set display : none
    //behind the scene, it's uses CSS and used CSS prperties
    $('.parent div').on('click', function (ev) {
        $(ev.currentTarget).fadeTo(500, 0);
    });

    $('#showAll').on('click', function (ev) {
        $('.parent div').fadeTo(0, 1);
    });

</script>